<template>
  <div>
    <q-form class="sc-edit">
      <yq-table
        v-model:search="searchForm"
        v-model:table="tableOptions"
        v-model:initial="initialPagination"
        @onRequest="onRequest"
        @add="add"
        @search="rolelist"
      >
        <template v-slot:yq_table_body="props">
          <q-tr :props="props.props">
            <q-td key="id" :props="props.props">
              <span>{{ props.props.row.id }}</span>
            </q-td>

            <q-td key="name" :props="props.props">
              <span>{{ props.props.row.name }}</span>
            </q-td>

            <q-td key="desc" :props="props.props">
              <span>{{ props.props.row.desc }}</span>
            </q-td>

            <q-td key="sort" :props="props.props">
              <span>{{ props.props.row.sort }}</span>
            </q-td>

            <q-td key="status" :props="props.props">
              <span>{{ props.props.row.status == 0 ? '关闭' : '启动' }}</span>
            </q-td>

            <q-td key="created_at" :props="props.props">
              <span>{{ props.props.row.created_at }}</span>
            </q-td>

            <q-td key="operation" :props="props.props">
              <q-btn
                flat
                round
                dense
                color="primary"
                icon="lock"
                @click="treeAdd(props.props.row.id, props.props.row)"
                v-permission="'/tsystem/BasicRole/role:rule-list'"
              >
                <q-tooltip>授权</q-tooltip>
              </q-btn>

              <q-btn
                flat
                round
                dense
                color="primary"
                icon="edit"
                @click="edit(props.props.row.id, props.props.row)"
                v-permission="'/tsystem/BasicRole:detail'"
              >
                <q-tooltip>编辑</q-tooltip>
              </q-btn>

              <q-btn
                flat
                round
                dense
                class="q-mx-xs"
                color="negative"
                icon="delete"
                v-permission="'/tsystem/BasicRole:delete'"
              >
                <q-menu
                  transition-show="jump-up"
                  transition-hide="jump-down"
                  content-class="text-center"
                  self="bottom left"
                  anchor="top left"
                  :offset="[60, 5]"
                >
                  <div class="q-px-sm q-pt-md">
                    <q-icon name="info" color="warning" class="q-mr-sm" />
                    是否要删除此行?
                  </div>
                  <div class="q-gutter-x-sm q-pt-sm q-pb-md">
                    <q-btn
                      color="grey-6"
                      unelevated
                      class="no-border-radius text-body2"
                      padding="2px sm"
                      dense
                      label="取消"
                      v-close-popup
                    ></q-btn>
                    <q-btn
                      color="primary"
                      unelevated
                      class="no-border-radius text-body2"
                      padding="2px sm"
                      dense
                      label="确认"
                      @click="deleteData(props.props.row.id, props.props.row)"
                      v-close-popup
                    ></q-btn>
                  </div>
                </q-menu>
              </q-btn>
            </q-td>
          </q-tr>
        </template>
      </yq-table>
    </q-form>
    <yq-dialog v-model:lockDialog="lockDialog" :title="title">
      <template v-slot:yq_dialog_body
        ><role-dialog :form="formRole" @backList="rolelist()"
      /></template>
    </yq-dialog>
    <yq-dialog
      v-model:lockDialog="treeDialog"
      :title="title"
      :auth="'/tsystem/BasicRole/role:rule-set'"
    >
      <template v-slot:yq_dialog_body
        ><tree-dialog
          :treeList="treeList"
          v-model:tickedTree="tickedTree"
          @backList="rolelist()"
          :treeId="treeId"
      /></template>
    </yq-dialog>
  </div>
</template>

<script setup lang="ts">
import { memberData, pageInit } from '../mocklist';
import { roleList, deleteRole, rulelist } from '@/api/basic';
import RoleDialog from './RoleDialog.vue';
import TreeDialog from './TreeDialog.vue';
import { Ref } from 'vue';
import { useQuasar } from 'quasar';
import { cloneDeep } from 'lodash-es';

// let advancedFormData = reactive(memberData);
// console.log('2322222', advancedFormData);
interface formRoleProps {
  id?: string;
  name?: string;
  desc?: string;
  sort?: number;
  status?: number;
  created_at?: string;
}

const tableOptions = reactive({
  tableLoading: false,
  ...memberData,
});
const initialPagination = ref(cloneDeep(pageInit));
const lockDialog = ref(false);
const treeDialog = ref(false);
const title = ref('新建角色');
const formRole: Ref<formRoleProps> = ref({});
const key = ref('');
const $q = useQuasar();
const treeList: any = ref([]);
const tickedTree: any = ref([]);
const treeId: any = ref(0);

const searchForm = reactive({
  keywords: '',
  search: {
    status: '',
  },
  dateMin: {
    created_at: '',
  },
  dateMax: {
    created_at: '',
  },
});
// const save = (index: number) => {
//   console.log(index);
// };
const add = () => {
  title.value = '新建角色';
  formRole.value = { status: 0 };
  lockDialog.value = true;
};
const query = () => {
  console.log('query');
};
//页码发生改变，触发事件
const onRequest = (props: any) => {
  console.log('页码改变', props);
  const { page, rowsPerPage, rowsNumber } = props.pagination;
  initialPagination.value.page = page;
  initialPagination.value.rowsPerPage = rowsPerPage;
  initialPagination.value.per_page = rowsPerPage;
  initialPagination.value.rowsNumber = rowsNumber;

  rolelist();
};

const treeAdd = async (index: number, item: any) => {
  title.value = '授权角色';
  treeDialog.value = true;
  const res: any = await rulelist({ id: item.id });
  treeId.value = item.id;
  treeList.value = res.data;
  tickedTree.value = res.data;
  //已选择的数据处理
  editFilter(tickedTree.value);

  console.log('获取角色配置权限', res);
};
//已选择的数据处理
const editFilter = (tk: any) => {
  console.log('props.tickedTree', tk);
  const list: any = [];
  if (tk.length > 0) {
    tk.forEach((item: any) => {
      const Root = JSON.parse(JSON.stringify(item));
      const queue = [];
      queue.push(Root);
      while (queue.length) {
        const node: any = queue.shift();
        if (node.children && node.children.length) {
          queue.push(...node.children);
        }
        delete node.children;
        if (node.pid !== null && node.pid !== undefined) {
          list.push(node);
        }
      }
    });
  }
  const islist = list
    .filter((item: any) => item.checked)
    .map((item: any) => item.id);
  tickedTree.value = cloneDeep(islist);
  console.log('props.useroptions1111111111', islist);
};
const edit = (index: number, item: any) => {
  lockDialog.value = true;
  title.value = '编辑角色';
  formRole.value = cloneDeep(item);
  console.log('edit', index, item, formRole);
};
const deleteData = async (index: number, item: any) => {
  const res: any = await deleteRole({ id: item.id });
  if (res.code == 200) {
    $q.notify({
      color: 'white',
      textColor: 'positive',
      icon: 'check_circle',
      position: 'top',
      message: res.msg,
    });
    initialPagination.value = pageInit;
    rolelist();
  }
};

const rolelist = async () => {
  lockDialog.value = false;
  treeDialog.value = false;
  tableOptions.tableLoading = true;
  const requestInfo = cloneDeep(
    Object.assign(initialPagination.value, searchForm)
  );
  const res: any = await roleList(requestInfo);
  tableOptions.tableLoading = false;
  tableOptions.columnDatas = res.data.data;
  initialPagination.value.rowsNumber = res.data.total;
  console.log('res------------', res, tableOptions);
};
onMounted(() => {
  rolelist();
});
</script>

<style scoped lang="scss">
.sc-design .sc-edit .q-item__section--side {
  padding-right: 0;
}

.q-field--dense .q-field__control {
  padding: 0 5px;
  height: 28px;
  .q-field__marginal {
    height: 28px;
  }
}
.q-field--auto-height .q-field--dense .q-field__control,
.q-field__native {
  min-height: 28px;
}
.q-gutter-x-sm,
.q-gutter-sm {
  margin-left: 15px;
}
::v-deep(.my-special-class) {
  height: 48px;
  background: #fafafa;
}
::v-deep(.my-special-class th) {
  font-size: 16px;
}
.top {
  padding-left: 10px;
}
.topLeft {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  // padding-left: 58px;
}
.topRight {
  padding-top: 10px;
}
@media screen and (max-width: 780px) {
  ::v-deep(.q-table__separator) {
    display: none;
  }
  ::v-deep(.el-input--large) {
    margin-top: 8px;
  }
}
</style>
